<template>
  <el-dialog
    title="事件详情"
    :visible.sync="show"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="1200px"
    custom-class="event-dialog"
    top="50px"
  >
    <div v-if="eventItem">
      <el-row>
        <el-col :span="6">
          <div>
            <div
              class="left"
              style="
                overflow-y: auto;
                overflow-x: hidden;
                position: relative;
                width: 100%;
                background: #545d64;
              "
            >
              <div class="event-track-tip yellow"><span>警</span>&gt;</div>

              <!--内容1-->
              <div class="event-track-detail-status">
                <div class="alarmObject-alarmType">
                  <div class="alarmObject">
                    {{
                      eventItem.targetType == "person"
                        ? eventItem.personName
                        : eventItem.carNum
                    }}
                  </div>
                  <div class="alarmType">
                    <span class="red"></span>{{ eventItem.alarmTypeName }}
                  </div>
                </div>
                <div class="highSpeedStop"></div>
                <div class="getMistake">
                  <div class="Uncorrected"></div>
                  <div class="Manual-treatment">
                    {{ eventItem.eventFinishName }}
                  </div>
                </div>
              </div>

              <!--内容2-->

              <div class="event-track-detail">
                <div class="detail-item">
                  <div class="item-title">持续时长</div>
                  <div class="item-title colorWhite">
                    {{ eventItem.persistTime }} 分钟
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-title">事件开始时间</div>
                  <div class="item-title colorWhite" id="eventStartTime">
                    {{ eventItem.eventStart }}
                  </div>
                </div>
                <div class="detail-item">
                  <div class="item-title">事件结束时间</div>
                  <div class="item-title colorWhite">
                    {{ eventItem.eventEnd }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="event-map-wrap">
            <div id="event-map"></div>
          </div>
          <el-table height="380" :data="eventItem.alarmDetailList" size="mini">
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            />
            <el-table-column label="里程(km)" align="center" prop="calcMile" />
            <el-table-column
              label="停留(min)"
              align="center"
              prop="stopMinute"
            />
            <el-table-column label="速度(km/h)" align="center" prop="speed" />
            <el-table-column label="油量(L)" align="center" prop="oilMass" />
            <el-table-column
              label="运行状态"
              align="center"
              prop="devState"
              width="150"
              show-overflow-tooltip
            />
            <el-table-column
              label="位置"
              align="center"
              prop="carLocation"
              width="150"
              show-overflow-tooltip
            />

            <el-table-column
              label="通讯时间"
              align="center"
              prop="dataTime"
              width="180"
            />
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog"> 关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CAR_PNG from "./traceCar.png";
import DOT_PNG from "./dot.png";

import { getFence } from "@/api/base/fence";
import { getTrace } from "@/api/lsd/lsd";

export default {
  name: "EventDetail",
  props: {
    visible: {
      required: true,
      default: false,
    },
    eventItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      map: null,
      marker: null,
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.show = false;
    },
    mapInit() {
      this.map = new AMap.Map("event-map", {
        resizeEnable: true,
        zoom: 5,
      });
      let self = this;
      this.map.plugin(["AMap.MapType"], function () {
        //地图类型切换
        var type = new AMap.MapType({
          defaultType: 0, //使用2D地图
        });
        self.map.addControl(type);
      });
      this.map.plugin(["AMap.ToolBar"], function () {
        //加载工具条
        var tool = new AMap.ToolBar();
        self.map.addControl(tool);
      });
      this.startTrackPlay();
      if (this.eventItem.fenceId) {
        this.drawFence();
      }
    },
    clearMap() {
      if (this.marker) {
        this.marker.stopMove();
      }

      this.marker = null;
      this.map.clearMap();
    },

    startTrackPlay() {
      this.map.clearMap();
      let me = this;
      let len = this.eventItem.alarmDetailList.length;
      let lineArr = [];
      for (let i = 0; i < len; i++) {
        let item = this.eventItem.alarmDetailList[i];
        if (i > 0) {
          let lastItem = this.eventItem.alarmDetailList[i - 1];
          var Xgap = Math.abs(parseFloat(item.lat) - parseFloat(lastItem.lat));
          var Ygap = Math.abs(parseFloat(item.lng) - parseFloat(lastItem.lng));
          //距离太小就不加进去  以免高德地图轨迹回放 内存溢出
          if (Xgap < 0.000005 && Ygap < 0.000005) {
          } else {
            lineArr.push([item.lng, item.lat]);
          }
        } else {
          lineArr.push([item.lng, item.lat]);
        }
      }

      console.log(lineArr);
      this.marker = new AMap.Marker({
        map: me.map,
        position: lineArr[0],
        icon: this.eventItem.targetType == "person" ? DOT_PNG : CAR_PNG,
        offset:
          this.eventItem.targetType == "person"
            ? new AMap.Pixel(-14, -14)
            : new AMap.Pixel(-24, -24),
        autoRotation: true,
        // angle: -90,
      });
      if (lineArr.length > 1) {
        // 绘制轨迹
        var polyline = new AMap.Polyline({
          map: me.map,
          path: lineArr,
          showDir: true,
          strokeColor: "#3366FF", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });

        var passedPolyline = new AMap.Polyline({
          map: me.map,
          // path: lineArr,
          strokeColor: "#AF5", //线颜色
          // strokeOpacity: 1,     //线透明度
          strokeWeight: 6, //线宽
          // strokeStyle: "solid"  //线样式
        });

        this.marker.on("moving", function (e) {
          passedPolyline.setPath(e.passedPath);
        });

        // this.marker.moveAlong(
        //   lineArr,
        //   10000,
        //   function (k) {
        //     return k;
        //   },
        //   true
        // );
      }

      this.map.setFitView();
    },
    drawFence() {
      getFence(this.eventItem.fenceId).then((response) => {
        let fenceObj = response.data;
        if (fenceObj.fenceType == "circle") {
          // 构造矢量圆形
          let circlePoints = fenceObj.latlng.split(",");
          var circle = new AMap.Circle({
            center: new AMap.LngLat(circlePoints[1], circlePoints[0]), // 圆心位置
            radius: fenceObj.radius, //半径
            strokeColor: "blue",
            strokeOpacity: 0.2,
            strokeWeight: 4,
            fillColor: fenceObj.bgColor,
            strokeStyle: "solid",
          });
          this.map.add(circle);
        } else if (fenceObj.fenceType == "rectangle") {
          let recPoints = fenceObj.latlng.split("|");

          // 构造矢量矩形  数据库存储的是左下和右上
          var southWest = new AMap.LngLat(
            recPoints[0].split(",")[1],
            recPoints[0].split(",")[0]
          );
          var northEast = new AMap.LngLat(
            recPoints[1].split(",")[1],
            recPoints[1].split(",")[0]
          );

          var bounds = new AMap.Bounds(southWest, northEast);

          var rectangle = new AMap.Rectangle({
            bounds: bounds,
            strokeColor: "blue",
            strokeOpacity: 0.2,
            strokeWeight: 4,
            fillColor: fenceObj.bgColor,
            strokeStyle: "solid",
          });
          this.map.add(rectangle);
        } else if (fenceObj.fenceType == "polygon") {
          // 构造矢量多边形
          let polyPoints = fenceObj.latlng.split("|");
          let path = [];
          polyPoints.forEach((poly) => {
            let item = poly.split(",");
            path.push([item[1], item[0]]);
          });

          var polygon = new AMap.Polygon({
            path: path,
            strokeColor: "blue",
            strokeOpacity: 0.2,
            strokeWeight: 4,
            fillColor: fenceObj.bgColor,
            strokeStyle: "solid",
          });

          this.map.add(polygon);
        }
      });
    },
  },
  watch: {
    show: function (val) {
      if (val) {
        if (this.eventItem) {
          if (this.map) {
            this.startTrackPlay();
            if (this.eventItem.fenceId) {
              this.drawFence();
            }
          } else {
            this.$nextTick(() => {
              this.mapInit();
            });
          }
        }
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss">
.event-dialog {
  .el-dialog__body {
    padding: 5px 0;
  }
}

.event-track-tip {
  position: absolute;
  width: 74px;
  height: 74px;
  left: -37px;
  top: -37px;
  background: #0188fb;
  border-radius: 50%;
}

.event-track-tip.yellow {
  background: #e9c33c;
}

.event-track-tip.yellow span {
  color: #000;
}

.event-track-tip span {
  display: block;
  margin: 35px 0 0 43px;
  width: 37px;
  height: 37px;
  line-height: 37px;
  font-size: 18px;
  color: #fff;
  font-family: "微软雅黑";
  font-weight: 600;
}

.event-track-detail-status {
  border-bottom: 1px solid #636b71;
  width: 100%;
  height: 170px;
  padding: 25px 20px;
  .alarmObject-alarmType {
    height: 60px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    font-family: "Alternate";
    .alarmObject {
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }
    .alarmType {
      line-height: 36px;
      font-size: 16px;
      color: #fff;
      span {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #f7d86b;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .highSpeedStop {
    width: 100%;
    /*height: 40px;*/
    /*line-height: 40px;*/
    padding: 5px;
    margin: 15px 0;
    font-size: 16px;
    color: #030303;
    border-radius: 4px;
    background: #e9c33c;
    text-align: center;
  }
  .getMistake {
    width: 100%;
    overflow: hidden;
    font-size: 16px;
    color: #f7d86b;
    font-family: "微软雅黑";
    font-weight: 100;
    .Uncorrected {
      float: left;
    }
    .Manual-treatment {
      float: right;
    }
  }
}
.red {
  background: #c53333;
}

.event-track-detail {
  border-bottom: 1px solid #636b71;
  width: 100%;
  height: 530px;
  overflow: hidden;
  padding: 15px 25px;
  .detail-item {
    height: 58px;
    width: 100%;
    .hide {
      display: none;
    }
    .item-title {
      height: 14px;
      line-height: 14px;
      color: #9c9c9c;
      font-size: 14px;
      font-weight: 100;
    }
    .colorWhite {
      color: #fff;
      height: 18px;
      line-height: 18px;
      font-size: 18px;
      margin-top: 8px;
      white-space: nowrap;
    }
  }
}
.event-map-wrap {
  width: 100%;
  height: 320px;

  top: 0;
  z-index: 110;
  #event-map {
    width: 100%;
    height: 100%;
  }
}
</style>
